
$(document).ready(function () {
    // 打开页面后查询所有数据
    query()
    // 给查询按钮绑定事件
    $("#findBtn").click(doQuery)


    $("#addBtn").click(function () {
        //iframe层
        parent.layer.open({
            type: 2,
            title: '添加名片',
            shadeClose: true,
            shade: 0.8,
            area: ['580px', '400px'],
            content: '/mgr/card/add.html', //iframe的url
            end:function() {
                location.reload();
            }
        });
    })
})
// 获取查询条件，调用query() 函数进行查询
function doQuery() {
    // 获取username的值
    const name = $("#username").val()
    // 获取 qq 的值
    const qq = $("#qq").val()
    // 获取 phone 的值
    const phone = $("#phone").val()
    // 清空表格
    $("#tbdy").empty()
    // 进行查询
    query(name,qq,phone)
}
function query(name,qq,phone) {
    $.ajax({
        url:'/mgr/card/list',//请求的url。在html中的/，表示从域名后面开始
        type:'get', //请求方式，GET或POST
        data:{ //要提交给服务器的数据
            username:name,
            qq,
            phone
        },
        dataType:'json',//服务器返回数据的类型
        success:function(data){//成功时执行该函数，data就是服务器返回的数据
            if(data.code==0){

                for(let item of data.data){

                    let row = `
                                <tr>
                                    <td width="150">${item.cname}</td>
                                    <td width="120">${item.cqq}</td>
                                    <td width="200" align="center">${item.cphone}</td>
                                    <td width="200">
                                        <button type="button" class="btn btn-primary btn-xs   glyphicon glyphicon-edit" onclick="showById(${item.cid})">修改</button>
                                        <button type="button" class="btn btn-xs btn-danger glyphicon glyphicon-trash" onclick="delById(${item.cid})">删除</button>
                                    </td>
                                </tr>
                            `
                    $("#tbdy").append(row)
                }
            }else{
                $("#msg").html(data.msg)//向id是msg的标签，显示文字
            }
        },
        error:function(xhr,textStatus){//错误时执行该函数
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })
}

function delById(cid) {
    //询问框
    parent.layer.confirm('您确认删除该条记录吗？', {
        btn: ['确定','取消'], //按钮
        shade: false //不显示遮罩
    }, function(index){
        delByIdAjax(cid)
        parent.layer.close(index)
    }, function(){
    });
}
function showById(cid) {
    //iframe层
    parent.layer.open({
        type: 2,
        title: '修改名片',
        shadeClose: true,
        shade: 0.8,
        area: ['580px', '400px'],
        content: '/mgr/card/showById.html?cid='+cid, //iframe的url
        end:function() {
            // location.reload();
            doQuery()
        }
    });
}
function delByIdAjax(cid){
    $.ajax({
        url:'/mgr/card/deleteById',
        type:'get',
        data:{
            cid
        },
        dataType:'json',//服务器返回数据的类型
        success:function(data){//成功时执行该函数，data就是服务器返回的数据
            if(data.code==0){
                // location.reload()
                doQuery()
            }else{
                $("#msg").html(data.msg)//向id是msg的标签，显示文字
            }
        },
        error:function(xhr,textStatus){//错误时执行该函数
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })
}